/**
 * 路由全局守卫 权限的管理
 */

import router from './router'
import store from '@/store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
// 导入修改标题的方法
import getPageTitle from '@/utils/get-page-title'
// 导入动态路由表
import { asyncRoutes } from '@/router/index'

NProgress.configure({ showSpinner: false }) // NProgress Configuration

const whiteList = ['/login', '/404'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  // start progress bar
  NProgress.start()
  const token = store.getters.token // 拿出vuex存储的token
  // 如果有token 再去login 直接跳转首页
  // console.log(token)
  if (token) {
    if (to.path === '/login') {
      next('/')
      NProgress.done() // 没有跳转路由 不走后置守卫 自己关闭进度条
    } else {
      next()
      // 如果没有用户姓名 发请求获取用户信息
      if (!store.getters.name) {
        const res = await store.dispatch('user/getUserInfoActions')
        // 1获取动态路由表信息 和后台接口发送的个人信息
        // console.log('动态路由表', asyncRoutes)
        // console.log(asyncRoutes.chlidren[0].name)
        // console.log('个人信息', res.data)
        // 2 以接口的信息过滤路由表 过滤条件 判断当前router 下面的children[0].name
        const menus = res.data.roles.menus
        const filterRoutes = asyncRoutes.filter(item => menus.includes(item.children[0].name))
        // console.log(filterRoutes)
        // 3 过滤后的路由加入到路由表 router.addRoutes() 路由实例添加路由的方法
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
        // 4 调用vuex的语法 把动态路由和静态路由结合
        store.commit('menu/SetMenus', filterRoutes)
      }
    }
  } else {
    // 没有token 看看想要跳转的路由是否在白名单
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

router.afterEach((to, from) => {
  // 修改浏览器窗口标题
  document.title = getPageTitle(to.meta.title)
  NProgress.done()
})
